<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分区管理</title>
    <link href="//static/css/bootstrap.min.css" rel="stylesheet">
    <link href="//static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="//static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="//static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="//static/css/public.css">
    <!-- jquery 提示插件css -->
    <link href="//static/plugins/toastr.min.css" rel="stylesheet">
    <!--zTree-->
    <link rel="stylesheet" href="//static/plugins/zTree/zTreeStyle.css">
    <script type="text/javascript"  src="http://api.map.baidu.com/api?v=2.0&ak=1t51luG5BxGrGLW4y9zu3sS6Tz8O3vAG"></script>
    <style type="text/css">
        .mpa_mh {
            height: 100%;
        }

        #allmap {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            margin: 0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body style="background-color: #f3f3f4;">
<div id="content">
    <!--主体-->
    <div>
        <!--左侧主体table 块-->
        <div class="float-left col-md-5" style="background-color: #fff;">
            <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加</button>
            <button class="btn btn-default my-btn my-search-btn my-btn-search"
                    style="top: 0;left: 200px;">查询
            </button>
            <table id="table"
                   data-toggle="table"
                   data-toolbar=".toolbar"
                   data-pagination="true"
                   data-maintain-selected="true"
                   data-search="true"
                   data-show-refresh="true"
                   data-search-align="left"
                   data-toolbar-align="right">
                <thead>
                <tr>
                    <th></th>
                    <th data-field="name">名称</th>
                    <th data-field="data">实时数据</th>
                    <th data-field="unit">单位</th>
                    <th data-field="time">采集时间</th>
                    <th data-field="max">最大</th>
                    <th data-field="min">最小</th>
                    <th data-formatter="operateFormatter" data-events="actionEvents" style="width: 150px;">操作</th>
                </tr>
                </thead>
            </table>
        </div>
        <!--右侧地图块-->
        <div class="col-md-7">
            <div id="allmap"></div>
        </div>
    </div>
    <!--添加分区模态-->
    <div id="partitionModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}分区</h4>
                </div>
                <div class="modal-manage">
                    <!--填写名称-->
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入名称">
                    </div>
                    <div class="form-group col-xs-12">
                        <label class="manage-title">上级：</label>
                        <input id="company" class="form-control form-manage2" autocomplete="off" placeholder="===请选择===">
                        <ul id="treeDemo" class="ztree modalZTree border-all">
                            <li v-if="treeLoading">正在加载中,请稍后.....</li>
                            <li v-if="!treeLoading && treeList.length==0">暂时没有数据,请添加</li>
                        </ul>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>单位<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入单位">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="nextTep()">下一步</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--模态弹出框-->
    <div id="modal" class="modal fade">
        <div class="modal-dialog" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">{{modalType}}分区</h4>
                </div>
                <div class="modal-manage">
                    <div class="col-xs-6">
                        <div class="ibox-content" style="position: relative;">
                            <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addModalClick()">添加
                            </button>
                            <button class="btn btn-default my-btn my-search-btn my-btn-search">查询</button>
                            <table id="modalTable"
                                   data-toggle="table"
                                   data-toolbar=".toolbar"
                                   data-pagination="true"
                                   data-maintain-selected="true"
                                   data-search="true"
                                   data-show-refresh="true"
                                   data-search-align="left"
                                   data-toolbar-align="right">
                                <thead>
                                <tr>
                                    <th data-width="50" data-field="id">编号</th>
                                    <th data-field="lat">经度</th>
                                    <th data-field="lng">纬度</th>
                                    <th data-width="200" data-formatter="modalFormatter" data-events="modalEvents">操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div id="modalMap" style="height: 350px;"></div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除 模态-->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <h3 class="text-center">{{staticModalType}}</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="staticRemoveClick()">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="staticOkClick()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>

<!-- 主要的脚本 -->
<script src="//static/js/jquery-3.1.1.min.js"></script>
<script src="//static/js/bootstrap.min.js"></script>
<script src="//static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="//static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!-- Toastr -->
<script src="//static/plugins/toastr/toastr.min.js"></script>
<!--zTree-->
<script src="//static/plugins/zTree/jquery.ztree.core.js"></script>
<!-- 定制的javascript和插件 -->
<script src="//static/js/ga.js"></script>
<script src="//static/js/vue.min.js"></script>
<!--Ztreegrid-->
<script src="//static/plugins/bootstrap-table/bootstrap-table-tree.js"></script>
<!--公共服务插件-->
<script src="//static/js/publicServe.js"></script>
<script>
    var vm = new Vue({
        el: '#content',
        data: {
            treeLoading:true,           //树结构加载判断
            treeList:[],                //zTree结构
            partitionData: {},          //表单输入填写数据
            modalType: '',              //弹出框 添加与修改状态判断
            modalList: [],
            staticModalType:'',         //删除模态框提示信息
        },
        methods: {},
        created: function () {

        }
    });

    $table = $('#table');
    $modalTable = $('#modalTable');
    var tableList = [
        {
            id: 1,
            ParentId: null,
            Level: 1,
            name: '全部分区',
            data: '20',
            unit: 'm³',
            time: '2018-2-10',
            max: '50',
            min: '3',
        },
        {
            id: 2,
            ParentId: 1,
            Level: 2,
            name: '分区2',
            data: '20',
            unit: 'm³',
            time: '2018-2-10',
            max: '50',
            min: '3',
            mapPolygon: [
                {
                    long: 112.620,
                    lat: 37.796
                },
                {
                    long: 112.599,
                    lat: 37.787
                },
                {
                    long: 112.564,
                    lat: 37.790
                },
                {
                    long: 112.575,
                    lat: 37.809
                },
                {
                    long: 112.608,
                    lat: 37.804
                }
            ]
        },
        {
            id: 3,
            ParentId: 1,
            Level: 2,
            name: '分区3',
            data: '20',
            unit: 'm³',
            time: '2018-2-10',
            max: '50',
            min: '3',
            mapPolygon: [
                {
                    long: 112.571,
                    lat: 37.860
                },
                {
                    long: 112.556,
                    lat: 37.848
                },
                {
                    long: 112.575,
                    lat: 37.832
                }
            ]
        },
    ];
    //bootstrapTable配置
    $table.bootstrapTable({
        toolbar: '#toolbar',
        sidePagination: 'client',
        pagination: false,
        treeView: true, //treeView:true表示启用树表格模式；
        treeId: "id",   //treeId:'Id'表示每一行tree的id；
        treeField: "name",      //treeField:'Name'表示要对那一列进行展开；
        treeRootLevel: 1,       //treeRootLevel:1表示树根的级别。
        clickToSelect: true,
        collapseIcon: "glyphicon glyphicon-menu-right",//折叠样式
        expandIcon: "glyphicon glyphicon-menu-down",//展开样式
        onClickRow: function (row) {                //table中行点击事件
            map.clearOverlays();  //清除地图覆盖物
            var userPolygon = [];
            if (row.ParentId) {
                for (var i = 0; i < row.mapPolygon.length; i++) {
                    userPolygon.push(new BMap.Point(row.mapPolygon[i].long, row.mapPolygon[i].lat));
                }
                var polygon = new BMap.Polygon(userPolygon, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});  //创建多边形
                map.addOverlay(polygon);   //增加多边形
            } else {
                for (var i = 0; i < tableList.length; i++) {
                    if (tableList[i].ParentId) {
                        var pointList = [];
                        for (var j = 0; j < tableList[i].mapPolygon.length; j++) {
                            pointList.push(new BMap.Point(tableList[i].mapPolygon[j].long, tableList[i].mapPolygon[j].lat));
                        }
                        var polygon = new BMap.Polygon(pointList, {
                            strokeColor: "blue",
                            strokeWeight: 2,
                            strokeOpacity: 0.5
                        });  //创建多边形
                        map.addOverlay(polygon);   //增加多边形
                    }
                }
            }
        },
        columns:                 //列表序号
            [{
                //field: 'Number',//可不加
                // title: 'Number',//标题  可不加
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }]
    });
    setTimeout(function(){
        $table.bootstrapTable('load', tableList);
    }, 500);

    //主页面上添加按钮被点击
    function addBtnClick() {
        //清空 vm.modalData 中的值
        vm.modalList = [];
        vm.modalType = "添加";
        $("#partitionModal").modal('show');
    }
    //为列表添加按钮
    function operateFormatter(value, row, index) {
        if(row.ParentId){
            return [
                '<button type="button" class="RoleOfedit btn btn-primary  btn-sm" style="margin-right:10px;">修改</button>',
                '<button type="button" class="RoleOfdelete btn btn-primary  btn-sm" style="margin-right:10px;">删除</button>'
            ].join('');
        }else{
            return '';
        }
    }
    //为列表添加事件
    window.actionEvents = {
        //添加编辑事件
        'click .RoleOfedit': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = row;
            //TODO: 将数据中的点位信息赋值给 vm.modalList

            vm.modalType = "修改";
            $("#partitionModal").modal('show');
        },
        //添加删除事件
        'click .RoleOfdelete': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = row;
            //调用删除模态
            $('#deleteModal').modal('show');
        }
    };

    //删除模态确认按钮被点击
    function staticOkClick() {

    }

    //表单输入模态点击下一步
    function nextTep() {
        $modalTable.bootstrapTable('load', vm.modalList);
        $("#modal").modal('show');
    }

    // 弹框百度地图API功能
    var modalMap = new BMap.Map("modalMap");
    modalMap.centerAndZoom(new BMap.Point(112.607, 37.803), 15);
    modalMap.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    modalMap.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    //单击获取点击的经纬度
    modalMap.addEventListener("click", function (e) {
        console.log(e)
        vm.modalList.push({
            id: vm.modalList.length,
            lat: e.point.lat,
            lng: e.point.lng
        });
        console.log(vm.modalList);
        $modalTable.bootstrapTable('load', vm.modalList);
    });

    //模态中点击添加按钮
    function addModalClick() {
        toastr.info('请点击地图选择点位');
    }

    //模态为列表添加按钮
    function modalFormatter(value, row, index) {
        return [
            '<button type="button" class="ModalOfedit btn btn-primary  btn-sm" style="margin-right:10px;">修改</button>',
            '<button type="button" class="ModalOfdelete btn btn-primary  btn-sm" style="margin-right:10px;">删除</button>'
        ].join('');
    }

    //模态为列表添加事件
    window.modalEvents = {
        //添加编辑事件
        'click .ModalOfedit': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定

//            vm.modalData = row;
        },
        //添加删除事件
        'click .ModalOfdelete': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
//            vm.modalData = row;
//            $("#deleteModal").modal('show');
        }
    };



    //地图
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(112.573, 37.824), 14);
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    //添加每个用户所在点的标注
    //    function addUserMarker() {
    //        for (var i = 0; i < vm.netWorkList.length; i++) {
    //            var point = new BMap.Point(vm.netWorkList[i].point.long, vm.netWorkList[i].point.lat);
    //            var icon = new BMap.Icon("equipment.png",new BMap.Size(30,30),{anchor: new BMap.Size(7,10)});
    //            var mkr = new BMap.Marker(point, { icon: icon});//创建标注
    //            vm.netWorkList[i].personalMarker = mkr;
    //            map.addOverlay(mkr);//将标注添加到地图上
    //            addClickHandler(vm.netWorkList[i], mkr); //添加事件监听
    //            //添加线
    //            if(!vm.netWorkList[i+1]){return}
    //            var polyline = new BMap.Polyline([
    //                new BMap.Point(vm.netWorkList[i].point.long, vm.netWorkList[i].point.lat),
    //                new BMap.Point(vm.netWorkList[i+1].point.long, vm.netWorkList[i+1].point.lat)
    //            ], {strokeColor:"#222d32", strokeWeight:2, strokeOpacity:0.5});   //创建折线
    //            map.addOverlay(polyline);   //增加折线
    //        }
    //    }
    //
    //    //标注点事件监听
    //    function addClickHandler(item, marker) {
    //        marker.addEventListener("click", function (e) {
    //            openInfo(item, e);//点击打开标注点信息窗口
    //        });
    //    }
    //
    //    //点击打开标注点信息窗口
    //    function openInfo(item, e) {
    //        var long;
    //        var lat;
    //        var point;
    //        var sContent =
    //            `
    //                <div class="infoWindow-box">
    //                    <div class="infoWindow-title">
    //                        <span>${item.userName}</span>
    //                         <a class="float-right infoWindow-a" href="">查看详情 ></a>
    //                    </div>
    //                    <div class="float-clear">
    //                        <img src="image/pumpImg.jpg" class="float-left infoWindow-img">
    //                        <div class="float-left">
    //                            <div class="infoWindow-detail">运行状态：开</div>
    //                            <div class="infoWindow-detail">运行时间：${item.day}天</div>
    //                            <div class="infoWindow-detail">设备状态：${item.step}</div>
    //                            <div class="infoWindow-detail">设备编号：${item.no}</div>
    //                        </div>
    //                    </div>
    //                </div>
    //                `;
    //        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
    //        if (e) {
    //            long = e.target.getPosition().lng;
    //            lat = e.target.getPosition().lat
    //        } else {
    //            long = item.point.long;
    //            lat = item.point.lat;
    //        }
    //        point = new BMap.Point(long, lat);
    //        map.openInfoWindow(infoWindow, point); //开启信息窗口
    //        //图片加载完毕重绘infowindow
    //        document.getElementsByClassName('infoWindow-img').onload = function (){
    //            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
    //        };
    //        map.panTo(point);                       //将地图中心移动到当前选择点位
    //    }
    //
    //    //点击改变在线人员列表状态
    //    function personalActive(index) {
    //        vm.personalList[vm.oldIndex].isActive = false;
    //        vm.oldIndex = index;
    //        vm.personalList[index].isActive = true;
    //        map.clearOverlays();  //清除地图覆盖物
    //        addUserMarker();      //将点位重新标注出来
    //        var userPolygon = [];
    //        for(var i=0;i<vm.personalList[index].mapPolygon.length;i++){
    //            userPolygon.push(new BMap.Point(vm.personalList[index].mapPolygon[i].long,vm.personalList[index].mapPolygon[i].lat));
    //        }
    //        var polygon = new BMap.Polygon(userPolygon, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
    //        map.addOverlay(polygon);   //增加多边形
    //    }
    //    //关闭所有分区用户盒子
    //    function closeActive() {
    //        setTimeout(()=>{
    //            for(var i=0;i<vm.personalList.length;i++){
    //                vm.personalList[i].isActive = false;
    //            }
    //            map.clearOverlays();  //清除地图覆盖物
    //            addUserMarker();      //将点位重新标注出来
    //        },100)
    //    }
    //
    //    //用户列表被选中
    //    function userBoxActive(index,userIndex) {
    //        for(var i=0;i<vm.personalList.length;i++){
    //            for(var j=0;j<vm.personalList[i].content.length;j++){
    //                vm.personalList[i].content[j].isActive = false;
    //            }
    //        }
    //        vm.personalList[index].content[userIndex].isActive = true;
    //    }
    //
    //    //添加每个用户所在点的标注
    //    addUserMarker();

    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };

</script>
</body>
</html>